<script setup>
/*
接收传递过来的路径的参数
useRouter:函数用来接收参数
router.param:表示的是路径参数
router.query:表示的是键值对参数
 */
import {useRouter} from "vue-router";
import {onUpdated, ref} from "vue";

let router = useRouter()
let languageId = ref(0)
let languageName = ref('')
/*
currentRoute:响应式的对象，用于表示当前活跃的路由的状态，包含了当前页面中的路由信息，比如 路径 参数 字符串 等

 */
languageId.value = router.currentRoute.value.query.id
languageName.value = router.currentRoute.value.query.language

onUpdated(() => {
      languageId.value = router.currentRoute.value.query.id
      languageName.value = router.currentRoute.value.query.language
    }
)
</script>

<template>
  <div>
    <h1>showDetail接受键值对参数</h1>
    <h3>{{languageId}} {{languageName}} 是世界上最好的语言</h3>
  </div>
</template>

<style scoped>

</style>
